import React from 'react';

import Request from '@utils/request.js';
import StartIcon from '@assets/images/start_point.png';
import EndIcon from '@assets/images/end_point.png';

import './orderdetail.scss';

const BMap = window.BMap;
export default class OrderDetail extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      orderInfo: null
    }
    this.map = null;
  }

  componentDidMount() {
    let id = this.props.match.params.id;
    let options = {
      url: `/order/detail/${id}`,
      method: 'get',
      data:{
        showLoading: true
      }
    }

    Request.axiosRes(options).then(res => {
      this.setState({
        orderInfo: res.content
      }, () => this.renderMap(res.content))
    }, err => {
      console.log(err)
    })
  }
  
  renderMap(result) {
    this.map = new BMap.Map('orderDetailMap');
    // let point = new window.BMap.Point('北京');
    this.addMapControl();
    this.drewServerArea(result.area);
    this.drawBikePath(result.position_list);
  }

  drawBikePath(positionList) {
    let map = this.map;
    let startPoint = null;
    let endPoint = null;

    if (positionList.length > 0) {
      let firstPos = positionList[0];
      let lastPos = positionList[positionList.length-1];
      // 创建起始坐标覆盖物
      startPoint = new BMap.Point(firstPos.lon, firstPos.lat);
      let startIcon = new BMap.Icon(StartIcon, new BMap.Size(36, 42), {
        imageSize: new BMap.Size(36, 42),
        anchor: new BMap.Size(36, 42)
      });
      let startMacker = new BMap.Marker(startPoint, {icon: startIcon});
      
      // 创建结束坐标覆盖物
      endPoint = new BMap.Point(lastPos.lon, lastPos.lat);
      let endIcon = new BMap.Icon(EndIcon, new BMap.Size(36, 42), {
        imageSize: new BMap.Size(36, 42),
        anchor: new BMap.Size(36, 42)
      });
      let endMacker = new BMap.Marker(endPoint, {icon: endIcon});
      
      // 添加地图覆盖物 
      map.addOverlay(startMacker);
      map.addOverlay(endMacker);

      // 绘制车辆行驶路径
      let trackPoints = positionList.map(item => {
        return new BMap.Point(item.lon, item.lat);
      });
      let polyline = new BMap.Polyline(trackPoints, {
        strokeColor: 'blue',
        strokeWeight: 4,
        strokeOpacity: 0.5
      })
      map.addOverlay(polyline);
      // map.centerAndZoom(endPoint, 10);
    }

  }

  drewServerArea(positionList) {
    let map = this.map;
    let cLon = 0;
    let cLat = 0;
    let ph = positionList.length;
    let serverAreaPoint = positionList.map((item, index) => {
      cLon += item.lon-0;
      cLat += item.lat-0;

      if (index === ph - 1) {
        cLon = cLon / ph;
        cLat = cLat / ph;
      }

      return new BMap.Point(item.lon, item.lat);
    });

    let serverCenterPoint = new BMap.Point(cLon, cLat);
    let polygon = new BMap.Polygon(serverAreaPoint, {
      strokeColor: '#ce0000',
      strokeWeight: 5,
      strokeOpacity: 0.5,
      fillColor: '#fff',
      fillOpacity: 0.4
    })
    map.addOverlay(polygon);
    map.centerAndZoom(serverCenterPoint, 11);
  }

  // 添加地图控件
  addMapControl() {
    let map = this.map;
    map.addControl(new BMap.NavigationControl({anchor: window.BMAP_ANCHOR_TOP_LEFT}));
    map.addControl(new BMap.ScaleControl({anchor: window.BMAP_ANCHOR_TOP_LEFT}));
  }

  render() {
    const info = this.state.orderInfo || {};
    return (
      <div className="order-detail">
        <div id="orderDetailMap" className="order-map"></div>
        <div className="detail-items">
          <div className="item-title">基础信息</div>
          <ul className="detail-form">
              <li>
                  <div className="detail-form-left">用车模式</div>
                  <div className="detail-form-content">{info.mode === 1 ?'服务区':'停车点'}</div>
              </li>
              <li>
                  <div className="detail-form-left">订单编号</div>
                  <div className="detail-form-content">{info.order_sn}</div>
              </li>
              <li>
                  <div className="detail-form-left">车辆编号</div>
                  <div className="detail-form-content">{info.bike_sn}</div>
              </li>
              <li>
                  <div className="detail-form-left">用户姓名</div>
                  <div className="detail-form-content">{info.user_name}</div>
              </li>
              <li>
                  <div className="detail-form-left">手机号码</div>
                  <div className="detail-form-content">{info.mobile}</div>
              </li>
          </ul>
      </div>
      <div className="detail-items">
          <div className="item-title">行驶轨迹</div>
          <ul className="detail-form">
              <li>
                  <div className="detail-form-left">行程起点</div>
                  <div className="detail-form-content">{info.start_location}</div>
              </li>
              <li>
                  <div className="detail-form-left">行程终点</div>
                  <div className="detail-form-content">{info.end_location}</div>
              </li>
              <li>
                  <div className="detail-form-left">行驶里程</div>
                  <div className="detail-form-content">{info.distance/1000}公里</div>
              </li>
          </ul>
      </div>
      </div>
    )
  }
}